<!DOCTYPE html>
<html lang='zh-CN'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width,maximum-scale=1.0,minimum-scale=1.0'>
  <link rel="shortcut icon" href="favicon.ico">
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>制作自己的国庆专属头像</title>
  <style>
    body {
      font-size: 20px;
      text-align: center;
      margin: 0;
    }

    label {
      position: fixed;
      bottom: 0;
      left: 0;
      font-size: 10px;
    }

    .header {
      color: #108757;
      height: 3rem;
    }

    #cvs {
      display: none;
      margin: 0 auto;
    }

    .canvas-container {
      margin: 0 auto;
    }

    .hide,
    #exportBtn {
      display: none;
    }

    .body {
      margin: 4rem auto 3rem;
      height: 10rem;
      width: 10rem;
      border: solid 1px #aaa;
      box-shadow: 0 0 5px #aaa;
      border-radius: 1rem;
      line-height: 10rem;
      position: relative;
    }

    #export {
      display: none;
      margin: 0 auto;
      width: 250px;
      height: 250px;
    }

    .footer {
      display: flex;
      justify-content: space-around;
    }

    button {
      font-size: 18px;
      color: #fff;
      padding: 0 30px;
      height: 2.3rem;
      background: #8fd16f;
      border: 0;
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <div class='header'>
    <h2>制作自己的国庆专属头像</h2>
  </div>
  <div class='body' id='uploadContainer'>
    <small id='uploadText'>上传头像</small>
    <input id='upload' type='file' onchange='viewer()'
      style='height: 10rem; width: 10rem; position: absolute; top: 0; left: 0; opacity: 0'>
  </div>
  <img id='export' alt='圣诞快乐' src='' />
  <canvas id='cvs'></canvas>
  <p id='tip' style='opacity: 0'>点击调整位置和大小</p>
  <div class='footer'>
    <button id='change' onClick='changeHat()' style='display: none;'>换个样式</button>
    <button id='exportBtn' onClick='exportFunc()'>生成头像</button>
    <!-- <a onClick='reUpload()'>重来</a> -->
  </div>
  <div style='display: none'>
    <img id='img' src='' alt='' />
    <img class='hide' id='hat0' src='./img/hat0.png' />
    <img class='hide' id='hat1' src='./img/hat1.png' />
    <img class='hide' id='hat2' src='./img/hat2.png' />
    <img class='hide' id='hat3' src='./img/hat3.png' />
    <img class='hide' id='hat4' src='./img/hat0.png' />
    <img class='hide' id='hat5' src='./img/hat1.png' />
    <img class='hide' id='hat6' src='./img/hat2.png' />
    <img class='hide' id='hat7' src='./img/hat3.png' />
    <img class='hide' id='hat8' src='./img/hat4.png' />
    <img class='hide' id='hat9' src='./img/hat0.png' />
  </div>
  <!--https://gitee.com/webahzjjd_admin/guoqi-->
  <script src="https://cdn.bootcss.com/fabric.js/2.0.0-rc.3/fabric.min.js"></script>
  <script>
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var exportImage = document.getElementById("export");
    var img = document.getElementById("img");
    var hat = "hat6";
    var canvasFabric;
    var hatInstance;
    var screenWidth = window.screen.width < 500 ? window.screen.width : 300;

    function viewer() {
      var file = document.getElementById("upload").files[0];
      console.log(file);
      var reader = new FileReader;
      if (file) {
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          img.src = reader.result;
          img.onload = function () {
            img2Cvs(img)
          }
        }
      } else {
        img.src = ""
      }
    }

    function img2Cvs(img) {
      cvs.width = img.width;
      cvs.height = img.height;
      cvs.style.display = "block";
      canvasFabric = new fabric.Canvas("cvs", {
        width: screenWidth,
        height: screenWidth,
        backgroundImage: new fabric.Image(img, {
          scaleX: screenWidth / img.width,
          scaleY: screenWidth / img.height
        })
      });
      changeHat();
      document.getElementById("uploadContainer").style.display = "none";
      document.getElementById("uploadText").style.display = "none";
      document.getElementById("upload").style.display = "none";
      document.getElementById("change").style.display = "block";
      document.getElementById("exportBtn").style.display = "block";
      document.getElementById("tip").style.opacity = 1
    }

    function changeHat() {
      document.getElementById(hat).style.display = "none";
      var hats = document.getElementsByClassName("hide");
      hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
      var hatImage = document.getElementById(hat);
      hatImage.style.display = "block";
      if (hatInstance) {
        canvasFabric.remove(hatInstance)
      }
      hatInstance = new fabric.Image(hatImage, {
        top: 40,
        left: screenWidth / 3,
        scaleX: 100 / hatImage.width,
        scaleY: 100 / hatImage.height,
        cornerColor: "#0b3a42",
        cornerStrokeColor: "#fff",
        cornerStyle: "circle",
        transparentCorners: false,
        rotatingPointOffset: 30
      });
      hatInstance.setControlVisible("bl", false);
      hatInstance.setControlVisible("tr", false);
      hatInstance.setControlVisible("tl", false);
      hatInstance.setControlVisible("mr", false);
      hatInstance.setControlVisible("mt", false);
      canvasFabric.add(hatInstance)
    }

    function exportFunc() {
      document.getElementsByClassName("canvas-container")[0].style.display = "none";
      document.getElementById("exportBtn").style.display = "none";
      document.getElementById("tip").innerHTML = "长按图片保存或分享";
      document.getElementById("change").style.display = "none";
      cvs.style.display = "none";
      exportImage.style.display = "block";
      exportImage.src = canvasFabric.toDataURL({
        width: screenWidth,
        height: screenWidth
      })
    }
  </script>
</body>

</html>